<template>
  <div class="container">
    <div class="canvas" ref="canvas"></div>
    <div ref="panel" class="panel"></div>
  </div>
</template>
<script setup lang="ts">
import BpmnModeler from "bpmn-js";
// 使用右侧属性栏
import propertiesPanelModule from "bpmn-js-properties-panel";
import propertiesProviderModule from "bpmn-js-properties-panel/dist";
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda.json";
import { xmlStr } from "./xmlStr";
import { ref, onMounted } from "vue";
// bpmn 工作流绘图工具的样式

const canvas = ref(null);
const panel = ref(null);
const container = ref(null);
const init = () => {
  const bpmn = new BpmnModeler({
    container: canvas.value,
    
  });

  const createNewDiagram = () => {
    // 将字符串转换成图显示出来
    try {
      const result = bpmn.importXML(xmlStr);
      const { warnings } = result;
      console.log(result);
    } catch (err: any) {
      console.log(err.message, err.warnings);
    }
  };
  createNewDiagram();
};
onMounted(() => {
  init();
});
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.canvas {
  width: 100%;
  height: 100%;
}
.panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
}
</style>
